<template>
  <v-container fluid>
    <v-row align="center" justify="center">
      <v-col lg="6" md="6" sm="12">
        <v-row align="center" justify="center">
          <v-img :src="songdetail.al.picUrl" max-width="300">
            <v-overlay :absolute="true" :value="!playing"></v-overlay>
            <v-btn class="mx-2 centerbtn" fab outlined color="primary">
              <v-icon
                dark
                v-text="playing ? 'mdi-pause' : 'mdi-play'"
                @click="playbtn_click"
              ></v-icon>
            </v-btn>
          </v-img>
        </v-row>
        <v-row align=" text-center" justify="center">
          <audio
            ref="audio"
            :src="songurl.url"
            controls
            autoplay="autoplay"
            hidden
          />
          <h3 class="pt-2">{{ songdetail.name }}</h3>
          <h4>
            <span v-for="(item, index) in songdetail.ar" :key="index"
              >{{ item.name }}&nbsp;</span
            >
          </h4>
        </v-row>
        <div class="contacts">
          <div class="tree">
            <el-row
              v-for="(item, index) in lyric"
              :key="index"
              align=" text-center"
            >
              {{ item.text }}
            </el-row>
          </div>
        </div>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  data() {
    return {
      songurl: {},
      songdetail: { al: [] },
      playing: true,
      hotComments: [],
      songmv: [],
      lyric: [],
    };
  },
  methods: {
    playbtn_click() {
      this.playing = !this.playing;
      if (this.playing) this.$refs.audio.play();
      else this.$refs.audio.pause();
    },
    get_lyric() {
      this.$http
        .get(
          "/api/song/lyric?" +
            "id=" +
            this.$route.params.id +
            "&lv=1&kv=1&tv=-1"
        )
        .then((res) => {
          this.formatLyric(res.data.lrc.lyric);
        });
    },
    formatLyric(text) {
      let arr = text.split("\n"); //原歌词文本已经换好行了方便很多，我们直接通过换行符“\n”进行切割
      let row = arr.length; //获取歌词行数
      for (let i = 0; i < row; i++) {
        let temp_row = arr[i]; //现在每一行格式大概就是这样"[00:04.302][02:10.00]hello world";
        let temp_arr = temp_row.split("]"); //我们可以通过“]”对时间和文本进行分离
        let text = temp_arr.pop(); //把歌词文本从数组中剔除出来，获取到歌词文本了！
        //再对剩下的歌词时间进行处理
        temp_arr.forEach((element) => {
          let obj = {};
          let time_arr = element.substr(1, element.length - 1).split(":"); //先把多余的“[”去掉，再分离出分、秒
          let s = parseInt(time_arr[0]) * 60 + Math.ceil(time_arr[1]); //把时间转换成与currentTime相同的类型，方便待会实现滚动效果
          obj.time = s;
          obj.text = text;
          this.lyric.push(obj); //每一行歌词对象存到组件的lyric歌词属性里
        });
      }
      this.lyric.sort(this.sortRule); //由于不同时间的相同歌词我们给排到一起了，所以这里要以时间顺序重新排列一下
      console.log(this.lyric);
    },
    sortRule(a, b) {
      //设置一下排序规则
      return a.time - b.time;
    },
    get_url() {
      this.$http
        .get("http://musicapi.leanapp.cn/music/url", {
          params: {
            id: this.$route.params.id,
          },
        })
        .then((res) => {
          console.log(res);
          if (res.data.code == 200 && res.data.data.length > 0) {
            this.songurl = res.data.data[0];
          }
        });
      this.$http
        .get("http://musicapi.leanapp.cn/mv/url", {
          params: {
            id: this.$route.params.id,
          },
        })
        .then((res) => {
          console.log(res);
          if (res.data.code == 200 && res.data.data.length > 0) {
            this.songmv = res.data.data[0];
          }
        });
    },
    get_detail() {
      this.$http
        .get("http://musicapi.leanapp.cn/song/detail", {
          params: {
            ids: this.$route.params.id,
          },
        })
        .then((res) => {
          console.log(res);
          if (res.data.code == 200 && res.data.songs.length > 0) {
            this.songdetail = res.data.songs[0];
          }
        });
    },
    get_comment() {
      this.$http
        .get("http://musicapi.leanapp.cn/comment/music", {
          params: {
            id: this.$route.params.id,
            limit: 1,
          },
        })
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.hotComments = res.data.hotComments;
          }
        });
    },
  },
  created() {
    this.get_url();
    this.get_detail();
    this.get_comment();
    this.get_lyric();
  },
};
</script>
<style  scoped >
.centerbtn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
h1,
h2,
h3,
h4,
h5 {
  width: 100%;
}

.contacts {
  width: 800px;
  height: 800px;
  overflow: hidden;
}
.tree {
  width: 950px;
  height: 100%;
  overflow-y: scroll;
  margin-top: 20px;
}
</style>